import React from 'react';
import style from './style.process';
import * as d3 from 'd3';
import util from '../../../util';

class TeamProcess extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'TeamProcess';
  }
  componentDidMount(){
    const {
      width = 170,
      height = 200,
      data: _data = [],
      onChange,
      report,
    } = this.props;
    const data = [..._data];
    if(report){
      data.unshift({
        fill: '#eee',
        value: !data.reduce((a, b)=>{return a + b.value},0) ? 1 : 0,
      })
    }

    this.svg = d3.select(this.refs.svg).append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    const radius = Math.min(width, height) / 2;

    
    this.arc = d3.arc()
      .outerRadius(radius - 15)
      .innerRadius(0);

    this.pie = d3.pie()
      .value(function(d) { return d.value; });

    const g = this.g = this.svg.selectAll(".arc")
      .data(this.pie(data))
      .enter().append("g")
      .attr("class", "arc");
    const i = d3.interpolate(0, 1);
    this.g.append("path")
      .style('fill', function(d){ return d.data.fill})
      .style('cursor','pointer')
      .style('stroke','#fff')
      .style('stroke-width',function(d) {return `${d.data.value ? '3' : '0'}px`})
      .attr("d", this.arc)
      .style('transform','rotate(180deg)')
      .on("click", function(d) {
        if(!onChange) return;
        const item = d3.select(this);
        const flag = item.classed('active');
        
        if(flag){
          item.classed('active', !flag).transition().duration(200)
            .style('transform','scale(1)')
          onChange && onChange(1);
        }else{
          g.selectAll('path').classed('active', false).transition().duration(200)
            .style('transform','scale(1)')
          item.classed('active', !flag).transition().duration(200)
            .style('transform','scale(1.05)')
            
          onChange && onChange(d.data.type);
        }
        
      })
      .transition().duration(1000)
      .style('transform','rotate(0)')
      
      
  }
  componentWillReceiveProps(nextProps) {
    const arc = this.arc;
    if(!util.isShallowEqual(this.props, nextProps)){
      const {
        report,
        data: _data,
      } = nextProps;
      const data = [..._data];
      if(report){
        data.unshift({
          fill: '#eee',
          value: !data.reduce((a, b)=>{return a + b.value},0) ? 1 : 0,
        })
      }
      this.g.data(this.pie(data))
      this.g.each(function(d) {
        d3.select(this).select('path')
          .attr("d", () => {
            return arc(d);
          })
      });
      
    }
  }
  reset = () => {
    if(!this.props.onChange) return;
    this.svg.selectAll('path').transition().duration(200)
      .style('transform','scale(1)')
    this.props.onChange && this.props.onChange(1);    
  }
  render() {
    const {
      data = [],
      report
    } = this.props;
    return (
      <div className={style['process-area']} style={{width: '288px'}}>
        <div className={style['process-team-label']}>
          {
            report ? null :
            data.map((v, i) => {
              return (
                <div key={i}>
                  <div  className={style['label-box']}>
                    <div className={style['label-dot']} style={{backgroundColor: v.fill}}></div>
                    {`${v.text}/${v.value}`}
                  </div>
                </div>
              );
            })
          }
        </div>
        <div className={style['process-team-btn']} onClick={this.reset}>
          {
            report ?
            <div style={{paddingTop: '24px'}}>
            {
              data.map((v, i) => {
                return (
                  <div key={i}>
                    <div  className={style['label-box']}>
                      <div className={style['label-dot']} style={{backgroundColor: v.fill}}></div>
                      {`${v.text}/${v.value}`}
                    </div>
                  </div>
                );
              })
            }
            </div>
            :
            <div>
              <div className={style['label-large']}>{data.reduce((a,b) => {return a + b.value},0)}</div>
              <div>个目标</div>
            </div>
          }
        </div>
        <div ref={'svg'} key={'svg'} className={style['process-box']} style={{display: 'inline-block'}}>
        </div>
      </div>
    );
  }
}

export default TeamProcess;
